<template>
    <div id="body"></div>
</template>
<script>

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

export default {
    data() {
        return {
            ThreeEngine: null,
        }
    },
    mounted() {

        // 设置场景、相机和渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('body').appendChild(renderer.domElement);

        // 创建一个球体几何体并将其作为太阳几何体
        const sunGeometry = new THREE.SphereGeometry(10, 32, 32);

        // 创建一个材质并将其应用于太阳几何体
        const sunMaterial = new THREE.MeshPhongMaterial({
            color: 0xffff00,
            emissive: 0xff0000,
            specular: 0x111111,
            shininess: 30
        });
        sunGeometry.applyMatrix4(new THREE.Matrix4().makeScale(10, 10, 10));
        const sun = new THREE.Mesh(sunGeometry, sunMaterial);

        // 将太阳几何体添加到场景中
        scene.add(sun);

        // 创建一个点光源并将其作为太阳光源
        const sunLight = new THREE.PointLight(0xffffff, 1, 1000);

        // 将太阳光源添加到场景中
        scene.add(sunLight);

        // 设置太阳光源的位置和颜色
        sunLight.position.set(0, 0, 0);

        // 渲染场景
        renderer.render(scene, camera);


    },
}
</script>

<style scoped lang="less">
.three-canvas {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #d6eaff;
}
</style>